<template>
  <n-dropdown trigger="hover" @select="handleSelect" show-arrow :options="options">
    <n-button quaternary>
      <n-icon size="20" :depth="1">
        <language-icon />
      </n-icon>
    </n-button>
  </n-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { langList } from '@/i18n/index'
import { LangEnum } from '@/enums/styleEnum'
import { icon } from '@/plugins/icons'
import { useLangStore } from '@/store/modules/langStore/langStore'

const { LanguageIcon } = icon.ionicons5
const { locale } = useI18n()
const options = langList
const langStore = useLangStore()

const handleSelect = (key: LangEnum) => {
  locale.value = key
  langStore.changeLang(key)
}
</script>

<style lang="scss" scoped></style>
